<template>
	<div class="ll-page">
		<!-- S 查询 -->
		<div class="ll-page-query flex">
			<n-form
				inline
				:model="formValue"
				label-placement="left"
				:show-feedback="false"
				class="flex-1 flex-wrap"
			>
				<n-form-item label="站点：" path="value">
					<n-select
						v-model:value="formValue.location"
						filterable
						:options="locations"
						class="w-193px"
						@update:value="updateFormValue"
					/>
				</n-form-item>
				<n-form-item label="产品/订单：" path="value">
					<n-input
						v-model:value="formValue.productKeywords"
						placeholder="输入产品名称/产品ID/订单号"
						:autosize="true"
						class="w-240px"
						@keyup.enter="updateFormValue"
					>
						<template #suffix>
							<img
								class="top-icon-img"
								src="~@/assets/images/icon_symbol_search@2x.png"
								width="16"
								height="16"
								style="cursor: pointer"
								@click="getTableList"
							/>
						</template>
					</n-input>
				</n-form-item>
				<n-form-item label="提交时间：" path="value">
					<n-date-picker v-model:value="timeData" type="daterange" />
					<!--          @update-value="updateFormValue"-->
					<!--						:update-value-on-close="true"-->
				</n-form-item>
				<n-form-item label="创作者信息：" path="value">
					<n-input
						v-model:value="formValue.agentInfo"
						placeholder="输入名称/电话"
						:autosize="true"
						class="w-291px"
						@keyup.enter="updateFormValue"
					/>
				</n-form-item>
				<n-form-item
					v-show="router.currentRoute.value.path !== '/resource-apply/findListWithCC'"
					label="状态："
					path="value"
				>
					<n-select
						v-model:value="formValue.status"
						:options="statusList"
						class="w-193px"
						@update:value="updateFormValue"
					/>
				</n-form-item>
			</n-form>
			<n-space>
				<n-button color="rgba(0, 0, 0, 0.1)" text-color="#333333" @click="handelReset">
					重置
				</n-button>
			</n-space>
		</div>
		<!-- E 查询 -->

		<!-- S 表格 -->
		<div class="ll-page-table">
			<n-data-table
				:columns="columns"
				:data="tableData"
				:pagination="pagination"
				:remote="true"
				:loading="tableLoading"
				size="small"
				flex-height
				:style="{ height: '100%' }"
			/>
		</div>
		<!-- E 表格 -->

		<!-- S 驳回 -->
		<n-modal
			v-model:show="showRejectedModal"
			title="驳回原因"
			preset="dialog"
			:show-icon="false"
			:mask-closable="false"
			@close="handleRejectedClose"
		>
			<div>
				<n-form :model="formValue" label-placement="left" :show-feedback="false">
					<n-form-item>
						<n-input
							v-model:value="rejectedFormValue.backMessage"
							type="textarea"
							placeholder="请输入"
							maxlength="100"
							minlength="1"
							show-count
						/>
					</n-form-item>
				</n-form>
			</div>
			<template #action>
				<n-button
					size="small"
					color="rgba(0, 0, 0, 0.1)"
					text-color="#333333"
					@click="handleRejectedClose"
				>
					取消
				</n-button>
				<n-button
					:disabled="loadingBH"
					type="primary"
					color="#F55F4E"
					text-color="#FFFFFF"
					size="small"
					:loading="loadingBH"
					@click="approve"
				>
					确认驳回
				</n-button>
			</template>
		</n-modal>
		<!-- E 驳回 -->
	</div>
</template>
<script setup>
import { GameControllerOutline, GameController } from '@vicons/ionicons5';
import { h, nextTick, reactive, ref, watch } from 'vue';
import { NTag, NButton, useMessage } from 'naive-ui';
import dayjs from 'dayjs';
import { useRoute, useRouter } from 'vue-router';

import {
	locationList,
	findListStatusSelect,
	findListWithVideo,
	findListWithPerson,
	findListWithCC,
	findListWithAdmin,
	auditWithVideoPerson,
	auditWithPerson
} from '@/api/resourceApply';

const message = useMessage();
const router = useRouter();
const route = useRoute();

const tableLoading = ref(false);
const showRejectedModal = ref(false);

nextTick(() => {
	initData();
});

// 初始化数据
const initData = async () => {
	await getLocationList();
	await getListStatusSelect();
	await getTableList();
};

// 获取站点数据
const locations = ref([]);
const getLocationList = async () => {
	const setForm = {
		city: '',
		flag: true
	};
	let res = await locationList(setForm);
	if (res && res.code === 200) {
		locations.value = res.data.map((item) => {
			item.label = item.city;
			item.value = item.id;
			return item;
		});
		formValue.location = locations.value.length > 0 ? locations.value[0].value : null;
	}
};
// 获取状态下拉框数据
const statusList = ref([]);
const getListStatusSelect = async () => {
	let params = { flag: true };
	let res = await findListStatusSelect(params);
	if (res && res.code === 200) {
		statusList.value = res.data.map((item) => {
			item.label = item.name;
			item.value = item.value;
			return item;
		});
	}
};

// 提交时间
const timeData = ref(null);
// 监听提交时间
watch(timeData, (count) => {
	if (count) {
		formValue.startDate = dayjs(count[0])
			.set('hour', 0)
			.set('minute', 0)
			.set('second', 0)
			.format('YYYY-MM-DD HH:mm:ss');
		formValue.endDate = dayjs(count[1])
			.set('hour', 23)
			.set('minute', 59)
			.set('second', 59)
			.format('YYYY-MM-DD HH:mm:ss');
	} else {
		formValue.startDate = null;
		formValue.endDate = null;
	}
	formValue.pageIndex = 1;
	formValue.pageSize = 10;
	getTableList();
});

// 获取表格数据
let tableData = ref([]);
const getTableList = async () => {
	console.log(formValue, 'formValue');
	tableLoading.value = true;
	if (!formValue.agentInfo) {
		formValue.agentInfo = router.currentRoute.value.query.phone;
	}
	if (!formValue.productKeywords) {
		formValue.productKeywords = router.currentRoute.value.query.productId;
	}
	const params = {
		clientUserInfo: formValue.agentInfo, //创作者信息,姓名，电话
		startDate: formValue.startDate, // 审核开始时间
		endDate: formValue.endDate, // 审核结束时间
		keyWord: formValue.productKeywords, //	关键字 产品ID;产品名称;订单编号
		locationId: formValue.location, //站点编号
		status:
			router.currentRoute.value.path === '/resource-apply/findListWithCC' ? 3 : formValue.status, //状态
		pageIndex: formValue.pageIndex,
		pageSize: formValue.pageSize
	};
	let res = null;
	if (router.currentRoute.value.path === '/resource-apply/findListWithVideo') {
		res = await findListWithVideo(params);
	} else if (router.currentRoute.value.path === '/resource-apply/findListWithPerson') {
		res = await findListWithPerson(params);
	} else if (router.currentRoute.value.path === '/resource-apply/findListWithCC') {
		res = await findListWithCC(params);
	} else if (router.currentRoute.value.path === '/resource-apply/findListWithAdmin') {
		res = await findListWithAdmin(params);
	}
	tableLoading.value = false;
	if (res && res.code === 200) {
		tableData.value = res.data.data;
		pagination.itemCount = res.data.rowCount;
	}
};

const formValue = reactive({
	location: 0,
	productKeywords: null,
	startDate: null,
	endDate: null,
	agentInfo: null,
	status: null,
	pageIndex: 1,
	pageSize: 10
});
const rejectedFormValue = reactive({
	backMessage: null
});

// 数据更新
const updateFormValue = () => {
	formValue.pageIndex = 1;
	formValue.pageSize = 10;
	getTableList();
};

// 重置
const handelReset = () => {
	if (timeData.value) {
		router.currentRoute.value.query.phone = null;
		router.currentRoute.value.query.productId = null;
		formValue.location = 0;
		formValue.productKeywords = null;
		formValue.agentInfo = null;
		formValue.status = null;
		timeData.value = null;
		formValue.startDate = null;
		formValue.endDate = null;
		formValue.pageIndex = 1;
		formValue.pageSize = 10;
	} else {
		router.currentRoute.value.query.phone = null;
		router.currentRoute.value.query.productId = null;
		formValue.location = 0;
		formValue.productKeywords = null;
		formValue.agentInfo = null;
		formValue.status = null;
		timeData.value = null;
		formValue.startDate = null;
		formValue.endDate = null;
		formValue.pageIndex = 1;
		formValue.pageSize = 10;
		getTableList();
	}
};

const columns = [
	{
		title: '订单编号',
		key: 'uploadNo'
	},
	{
		title: '产品信息',
		key: 'x1',
		render(row) {
			return [
				h('div', {}, `站点：${row.city}`),
				h('div', {}, `ID：${row.productId}`),
				h('div', {}, `名称：${row.productName}`)
			];
		}
	},
	{
		title: '个人信息',
		key: 'x2',
		render(row) {
			return [
				h('div', {}, `名称：${row.name}`),
				h('div', {}, `电话：${row.mobile}`),
				h('div', {}, `合作方：${row.partnerName}`)
			];
		}
	},
	{
		title: '状态',
		key: 'statusChina',
		render(row) {
			return [
				h(
					'div',
					{
						style: {
							borderRadius: '4px',
							background: 'rgba(179, 143, 143, 0.08)',
							lineHeight: '16px',
							fontSize: '12px',
							fontWeight: 600,
							color:
								row.status === 1 || row.status === 2
									? '#1D6FE9'
									: row.status === 3
									? '#57AE59'
									: row.status === 4 || row.status === 5
									? '#F55F4E'
									: '#666666',
							width: row.status === 0 ? '70px;' : '46px',
							paddingLeft: '5px'
						}
					},
					`${row.statusChina}`
				)
			];
		}
	},
	{
		title: '上传信息',
		key: 'x3',
		render(row) {
			return [h('div', {}, `照片：${row.imgNumber}张`), h('div', {}, `视频：${row.videoNumber}个`)];
		}
	},
	{
		title: '审核信息',
		key: 'approveMessage',
		render(row) {
			if (row.status === 1 || row.status === 2) {
				return [h('div', {}, `暂无`)];
			} else if (row.status === 3 || row.status === 6) {
				return [
					h('div', {}, `通过照片：${row.successImgNumber}张`),
					h('div', {}, `通过视频：${row.successVideoNumber}个`)
				];
			} else if (row.status === 4 || row.status === 5) {
				return [h('div', {}, `${row.approveMessage}`)];
			}
			return [h('div', {}, ``)];
		}
	},
	{
		title: '提交日期',
		key: 'uploadTimeStr'
	},
	{
		title: '操作',
		key: 'actions',
		width: 230,
		render(row) {
			return [
				h(
					NButton,
					{
						size: 'small',
						text: true,
						type: 'primary',
						style: {
							marginRight: '20px',
							fontSize: '14px'
						},
						onClick: () => handleAuditDetails(row, 1)
					},
					{ default: () => '详情' }
				),
				h(
					NButton,
					{
						size: 'small',
						text: true,
						type: 'primary',
						style: {
							marginRight: '20px',
							fontSize: '14px',
							display:
								router.currentRoute.value.path === '/resource-apply/findListWithVideo' &&
								row.status !== 1
									? 'none'
									: router.currentRoute.value.path === '/resource-apply/findListWithPerson' &&
									  row.status !== 2
									? 'none'
									: router.currentRoute.value.path === '/resource-apply/findListWithCC' ||
									  router.currentRoute.value.path === '/resource-apply/findListWithAdmin'
									? 'none'
									: null
						},
						onClick: () => handleAuditDetails(row, 2)
					},
					{ default: () => '审核' }
				),
				h(
					NButton,
					{
						size: 'small',
						text: true,
						type: 'error',
						style: {
							marginRight: '20px',
							fontSize: '14px',
							display:
								router.currentRoute.value.path === '/resource-apply/findListWithVideo' &&
								row.status !== 1
									? 'none'
									: router.currentRoute.value.path === '/resource-apply/findListWithPerson' &&
									  row.status !== 2
									? 'none'
									: router.currentRoute.value.path === '/resource-apply/findListWithCC' ||
									  router.currentRoute.value.path === '/resource-apply/findListWithAdmin'
									? 'none'
									: null
						},
						onClick: () => handleRejecte(row)
					},
					{ default: () => '一键驳回' }
				)
			];
		}
	}
];

// 分页
const pagination = reactive({
	page: 1,
	pageSize: formValue.pageSize,
	pageSizes: [10, 20, 30, 40],
	showSizePicker: true,
	itemCount: 0,
	prefix({ itemCount }) {
		return `共${itemCount}条`;
	},
	onChange: (page) => {
		pagination.page = page;
		formValue.pageIndex = page;
		getTableList();
	},
	onPageSizeChange: (pageSize) => {
		pagination.pageSize = pageSize;
		formValue.pageSize = pageSize;
		formValue.pageIndex = 1;
		pagination.page = 1;
		getTableList();
	}
});

// 跳转详情、审核界面(type: 1详情2审核)
const handleAuditDetails = (row, type) => {
	if (type === 1) {
		if (router.currentRoute.value.path === '/resource-apply/findListWithVideo') {
			// 详情-视频审核员
			router.push({
				name: 'resourceApply_findDetail',
				query: { applyId: row.id, btn: '/resource-apply/findListWithVideo' }
			});
		} else if (router.currentRoute.value.path === '/resource-apply/findListWithPerson') {
			// 详情-个人审核员
			router.push({
				name: 'resourceApply_findDetail',
				query: { applyId: row.id, btn: '/resource-apply/findListWithPerson' }
			});
		} else if (router.currentRoute.value.path === '/resource-apply/findListWithCC') {
			// 详情-CC
			router.push({
				name: 'resourceApply_findDetail',
				query: { applyId: row.id, btn: '/resource-apply/findListWithCC' }
			});
		} else if (router.currentRoute.value.path === '/resource-apply/findListWithAdmin') {
			// 详情-admin
			router.push({
				name: 'resourceApply_findDetail',
				query: { applyId: row.id, btn: '/resource-apply/findListWithAdmin' }
			});
		}
	} else if (type === 2) {
		if (router.currentRoute.value.path === '/resource-apply/findListWithVideo') {
			router.push({
				name: 'resourceApply_detailApplyVideo',
				query: { applyId: row.id, btn: '/resource-apply/findListWithVideo' }
			});
		} else if (router.currentRoute.value.path === '/resource-apply/findListWithPerson') {
			router.push({
				name: 'resourceApply_detailApplyPerson',
				query: { applyId: row.id, btn: '/resource-apply/findListWithPerson' }
			});
		}
	}
};

// 一键驳回
const rejectedModal = ref(false);
let params = {
	approveStatus: null,
	message: null,
	resourceApplyId: null,
	resourcePictureIds: [],
	resourceVideoIds: [],
	result: 2
};
const handleRejecte = (res) => {
	showRejectedModal.value = true;
	params.approveStatus = res.status;
	params.resourceApplyId = res.id;
	loadingBH.value = false;
};

// 关闭驳回弹窗
const handleRejectedClose = (e) => {
	rejectedFormValue.backMessage = null;
	showRejectedModal.value = false;
};

// 审核
let loadingBH = ref(false);
const approve = async () => {
	if (!rejectedFormValue.backMessage) {
		message.error('驳回信息不能为空');
		loadingBH.value = false;
		return;
	}
	loadingBH.value = true;
	if (router.currentRoute.value.path === '/resource-apply/findListWithVideo') {
		// 视频审核员审核
		console.log('视频审核员审核-驳回');
		params.message = rejectedFormValue.backMessage;
		let res = await auditWithVideoPerson(params);
		if (res && res.code !== 200) {
			message.error(res.message);
			loadingBH.value = false;
		} else {
			message.success('成功驳回');
			handleRejectedClose();
			getTableList();
			loadingBH.value = false;
		}
	} else if (router.currentRoute.value.path === '/resource-apply/findListWithPerson') {
		// 指定人审核
		console.log('指定人审核-驳回');
		params.message = rejectedFormValue.backMessage;
		let res = await auditWithPerson(params);
		if (res && res.code !== 200) {
			message.error(res.message);
			loadingBH.value = false;
		} else {
			message.success('成功驳回');
			handleRejectedClose();
			getTableList();
			loadingBH.value = false;
		}
	}
};

// 监听路由变化
watch(
	() => route.path,
	() => {
		getLocationList();
		getListStatusSelect();
		handelReset();
	}
);
</script>

<style lang="less" scoped>
.ll-page {
	height: 100%;
	flex-direction: column;
	display: flex;
	background-color: #ffffff;
	&-query {
		background: @bg;
		padding: @padding-10 @padding-10 0 @padding-10;
		margin-right: 10px;
		margin-left: 10px;
		margin-top: 10px;
		border-radius: 3px;
		border: 1px solid #f0f0f0;
	}
	&-table {
		padding: 10px;
		overflow: hidden;
		flex: 1 1 0%;
	}
}
.n-form-item {
	margin-bottom: @margin-10;
}
</style>
